<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="./js/config.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建新的AI项目</title>
<script src="./js/create.js"></script>
<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f3f3f3;
    margin: 0;
    padding: 0;
  }
  
  .container {
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    padding: 20px;
  }
  
  header {
    background-color: #007bff;
    color: white;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #0056b3 3px solid;
  }
  
  header a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
  }
  
  header ul {
    padding: 0;
    list-style: none;
  }
  
  header li {
    display: inline;
    margin-left: 20px;
  }
  
  header #branding {
    float: left;
  }
  
  header #branding h1 {
    margin: 0;
  }
  
  header nav {
    float: right;
    margin-top: 10px;
  }
  
  header .highlight, header .current a {
    color: #0056b3;
    font-weight: bold;
  }
  
  header a:hover {
    color: #ffffff;
    font-weight: bold;
  }
  
  .banner {
    background-color: #0056b3;
    color: white;
    padding: 10px 0px;
  }
  
  .banner h1 {
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  
  .main-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin-top: 20px;
  }
  
  .main-section h2 {
    color: #007bff;
  }
  
  .main-section p {
    line-height: 1.6em;
  }
  
  .template-buttons {
    margin-top: 20px;
  }
  
  .template-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 4px;
    cursor: pointer;
    width: 300px;
    height: 200px;
    margin-top: 10px;
    font-weight: bold;
  }
  
  .template-button:hover {
    background-color: #0056b3;
  }
  
  footer {
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
  }
  .template-button h3 {
    font-size: 20px;
  }
</style>
<script src="./js/libui.js"></script>
</head>
<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1><span class="highlight">新</span>AI项目</h1>
      </div>
      <nav>
        <ul>
          <li class="current"><a href="#">首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="main-section">
    <div class="container">
      <h2>用AI创建你的项目:</h2>
      <p>理想情况下，你不需要写任何代码就可以完成一个程序的开发和部署，一般情况下你也不需要写代码，写代码将是过去式</p>
      <p style="font-weight: bold;">我们提供一站式自动部署服务</p>
      <div align="center">
        <div class="template-buttons" onclick="create('html_website')">
            <button class="template-button">
                <h3>纯前端网站</h3>
                <p>不需要任何后端的纯静态网站<br />
                <br />
                </p>
            </button>    
            <button class="template-button">
                <h3>静态个人网站</h3>
                <p>不需要后端服务，自定义展现
                    <br />
                    个人的主页，互联网均可访问</p>
            </button>   
            <button class="template-button">
                <h3>论坛网站/表白墙</h3>
                <p>具有后端以及数据库功能<br />
                提供论坛功能
                </p>
            </button>    
            <button class="template-button">
                <h3>公司主页</h3>
                <p>公司主页，通过模版以及通过AI<br />
                描述部署并创造
                </p>
            </button>    
            <button class="template-button">
                <h3>纯服务器应用程序</h3>
                <p>通过和AI沟通需求，AI编写专门的<br />
                    纯后端网络服务程序描述部署并创造
                </p>
            </button>   
            <button class="template-button">
                <h3>1GB储存云盘</h3>
                <p>如果不想要部署任何的网站<br />
                    那么我们同样是提供1GB的免费云盘
                </p>
            </button>
            <button class="template-button">
                <h3>数据分析网站</h3>
                <p>网站+后端分析<br />
                    分析该网站的一些数据内容
                </p>
            </button>   
            <button class="template-button">
                <h3>黑客云</h3>
                <p>AI信息安全以及渗透测试<br />
                    <br />
                </p>
            </button>   
            <button class="template-button">
                <h3>个人作品集网站</h3>
                <p>张贴自己的个人作品<br />
                    以及粉丝主页
                </p>
            </button>   
        </div>
      </div>
    </div>
    <br />
</section>
<style>
    .in {
        width: calc(100% - 10px);
        height: 30px;
        background-color: rgba(255, 255, 255, 0.212);
        border: none;
        border-bottom: 1px solid white;
        outline: none;
        color: white;
        border-top-left-radius: 5px;
        margin-top: 5px;
        border-top-right-radius: 5px;
    }
    .btn {
        width: 60px;
        height: auto;
        background-color: #007bff;
        color: white;
        border: none;
        padding: 5px;
        border-radius: 5px;
    }
</style>
<div id="create_console" style="display: none;color: white;font-weight: bold;padding: 10px;backdrop-filter: blur(10px);box-shadow: 0px 0px 5px black;background-color: #00000077;position: absolute;top: 300px;left: calc((100% - 300px) / 2);width: calc(300px);height: 500px;">
    <h2>新建项目</h2>
    <p id="project_type"></p>
    <input id="project_name" placeholder="项目名称" class="in" />
    <br />
    <input placeholder="验证码" id="check" class="in" />
    <br />
    <br />
    <img src="http://user.hackerstack.top/get_check_code" style="width: 90px;height: 40px;" />
    <br />
    <br /><br />
    <button class="btn" id="create_btn">
        创建
    </button>
    <button class="btn" onclick="document.getElementById('create_console').style.display='none'">
        取消
    </button>
</div>
</body>
</html>